<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
</head>

<body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 转换jsx的库 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入PropType库  min没有警告-->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">/* 此处要写babel */
        // 创建组件
        class Demo extends React.Component {
            // 传入事件对象

            /* (1)通过onXxx属性指定时间处理函数（注意大小写）
                a.React使用的式自定义（合成）事件，而不是原生DOM事件  --为了更好的兼容性
                b.React中的事件是通过事件委托方式处理的 委托给组件最外层的元素 --提高性能
                c.通过事件对象可以获得事件的相关信息
                d.通过事件对象可以阻止默认行为
                e.事件处理函数中的this指向组件对象
                f.事件处理函数中的event对象可以作为参数传递给其他函数
                (2)通过event.target可以获得事件发生的DOM对象，即事件发生源元素 
            */
            showData = (event) => {
                console.log(event.target.value)
            }
            render() {
                return (
                    <div>
                        <input type="text" onBlur={this.showData} placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }

        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(<Demo />);


    </script>
</body>

</html>